<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="JS/jquery-3.3.1.js"></script>
    <style type="text/css">
    div{
        width: 300px;
        margin: 0 auto;
    }
    input{
        display: block;
        height: 25px;
        line-height: 25px;
        width: 280px;
        margin: 10px;
        border: 1px solid;
        border-radius: 5px;
        color: #c0c0c0;
    }
    .change{
        border: #88e3f3;
    }
    #btn{
        height: 40px;
        line-height: 40px;
        background-color: #3ccde0;
        color: #ffffff;
        text-align: center;
        margin: 0 auto;
    }
    </style>
    <script type="text/javascript">
    $(function(){
        //增加蓝色边框,默认文字消失
        $("input:text").focus(function(){
            $(this).addClass("change");
            $(this).val("");
        }).blur(function(){
            $(this).removeClass("change");
            if($(this).val()==""){
                $(this).val(this.defaultValue);
            }
        });

        //判断表单信息，弹出提示框
        $("#btn").click(function(){
            if($("input[name='yhm']").val()=="请输入字母或数字组成的登录代码"||$("input[name='mm']").val()=="请输入大小写字母、数字和特殊符号组成的密码"){
                alert("请输入登录代码及密码");
            }
            else{
                alert("登陆成功");
            }
        });
    });
    </script>
</head>
<body>
    <div>
        <input name="yhm" type="text" value="请输入字母或数字组成的登录代码">
        <input name="mm" type="text" value="请输入大小写字母、数字和特殊符号组成的密码">
        <input id="btn" type="button" value="确认登录">
    </div>
</body>
</html>